<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link th:href="@{/CSS/parallax.css}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" th:href="@{/CSS/style.css}">
    <script type="text/javascript" th:src="@{/JS/parallax.js}"></script>
    <title>Parallax</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            overflow: clip;
            background: #1B2021;
        }
        .container{
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-size: cover;
            background: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
        }
        main{
            display: flex;
            height: 100vh;
        }
        canvas{
            margin: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <ui id="scence">
        <li class="layer" data-depth=".1">
            <img th:src="@{/images/text.png}" alt="" />
        </li>
        <li class="layer" data-depth="1">
            <img th:src="@{/images/note(S).png}" alt="" />
        </li>
        <li class="layer" data-depth="-1">
            <img th:src="@{/images/note(M)2.png}" alt="" />
        </li>
        <li class="layer" data-depth="2">
            <img th:src="@{/images/note(L).png}" alt="" />
        </li>
        <li class="layer" data-depth="0.5">
            <img th:src="@{/images/note(M).png}" alt="" />
        </li>
    </ui>
</div>
<script type="text/javascript">
    const scence = document.querySelector('#scence');
    const parallax = new Parallax(scence);
</script>
<!-- partial:index.partial.html -->

<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js'></script><script type="text/javascript" th:src="@{/JS/script.js}"></script>
</body>
</html>
